<template>
    <div class="tool_wrapper flex-row">
        <scroll-bar class="tool_note">
            <a-spin :spinning="loading">
                <div class="note_item" v-for="item in list" :key="item.id">
                    <div class="header flex-row">
                        <p class="time">时间：
                            <a-tooltip placement="top">
                                <template slot="title">
                                    <span>{{ item.time }}</span>
                                </template>
                                {{ item.time }}
                            </a-tooltip>
                        </p>
                        <a-icon type="close-circle" @click="deleteInfo(item)" :class="['icon']" theme="filled" />
                        <a-icon type="check-circle" @click="updateInfo(item)" :class="['icon', item.status == 1 && 'activeItem']"
                            theme="filled" />
                    </div>
                    <div class="location">地点：
                        <a-tooltip placement="top">
                            <template slot="title">
                                <span>{{ item.location }}</span>
                            </template>
                            {{ item.location }}
                        </a-tooltip>
                    </div>
                    <div class="task">任务：
                        <a-tooltip placement="top">
                            <template slot="title">
                                <span>{{ item.content }}</span>
                            </template>
                            {{ item.content }}
                        </a-tooltip>
                    </div>
                </div>
                <div v-if="list.length == 0">
                    <a-empty />
                </div>
            </a-spin>
            <a-button type="link" class="add_btn flex-row" v-if="isFeature" @click="isShow = true">
                <a-icon type="plus-circle" class="activeItem" theme="filled" />
            </a-button>
        </scroll-bar>
        <div class="tool_side flex_column">
            <weather-info />
            <div :style="{ border: '1px solid #d9d9d9', margin: '0 -1px -1px 0' }">
                <a-calendar :fullscreen="false" valueFormat="YYYY-MM-DD" @select="selectDate">
                    <template slot="dateCellRender" slot-scope="value">
                        <div :class="['ant-calendar-date',moment(value).format('YYYY-MM-DD') == moment(currentDate).format('YYYY-MM-DD') && 'date_active']">
                            <div v-if="moment(value).format('YYYY-MM-DD') != moment(currentDate).format('YYYY-MM-DD')">
                                {{ moment(value).format('D') }}
                            </div>
                            <div v-else class="ant-calendar-cell-active">
                                {{ moment(value).format('D') }}
                            </div>
                            <div
                                style="font-size: 10px; opacity: 0.7;color:#f90;"
                                v-if="getLunarDate(value)['lunarFestival']"
                            >
                                {{ getLunarDate(value)['lunarFestival'] }}
                            </div>
                            <div style="font-size: 10px; opacity: 0.7" v-else>
                                {{
                                    getLunarDate(value)['IDayCn'] == '初一' &&
                                    getLunarDate(value)['IMonthCn'].indexOf('闰') > -1
                                        ? getLunarDate(value)['IMonthCn']
                                        : getLunarDate(value)['IDayCn']
                                }}
                            </div>
                        </div>
                    </template>
                </a-calendar>
            </div>
        </div>

        <template v-if="isShow">
            <tool-basic :userId="userId" :date="currentDate" @cancel="isShow = false" @submit="submit()" />
        </template>
    </div>
</template>
<script>
import WeatherInfo from './weather.vue'
import ToolBasic from './tool-info.vue'
import { remoteToolList, addTool, updateTool, deleteTool } from '@/api/home'
import moment from 'moment'
import calendarFormatter from '@/utils/calendarFormatter.js';
export default {
    name: "ToolInfo",
    components: {
        WeatherInfo,
        ToolBasic
    },
    props: {
        userId: {
            type: String | Number,
            default: ''
        }
    },
    data() {
        return {
            isShow: false,
            currentDate: '',
            list: []
        }
    },
    computed:{
        isFeature(){
            let today = new Date(moment(new Date()).format('YYYY-MM-DD')).getTime();
            let currentDay = new Date(this.currentDate).getTime();
            return today>currentDay?false:true
        }
    },
    created() {
        let currentDate = moment(new Date()).format('YYYY-MM-DD');
        this.currentDate = currentDate;
        this.getToolList();
    },
    methods: {
        submit() {
            this.isShow = false;
            this.getToolList();
        },
        async updateInfo(info) {
            let { status } = info;
            info.status = status == 0 ? 1 : 0;
            await updateTool(info);
            this.$message.success('更新成功')
        },
        deleteInfo(item) {
            this.$confirm({
                title: '提示',
                content: '确定要删除该条信息？',
                okText: '确定',
                cancelText: '取消',
                onOk: async () => {
                    try {
                        let ids = [item.id];
                        await deleteTool({ ids });
                        this.$message.success('删除成功!');
                        this.getToolList();
                    } catch (err) { }
                },
                onCancel() { }
            });
        },
        //选择日历日期
        selectDate(date) {
            this.currentDate = date;
            this.getToolList();
        },
        async getToolList() {
            this.loading = true;
            try {
                let date = this.currentDate;
                let userId = this.userId;
                let res = await remoteToolList({ date, userId, page: 1, size: 100 });
                let { list } = res.data;
                this.list = list;
            } finally {
                this.loading = false;
            }
        },
        moment(value){
            return moment(value)
        },
        getLunarDate(current) {
            let year = moment(current).format('YYYY') * 1;
            let month = moment(current).format('M') * 1;
            let day = moment(current).format('D') * 1;
            return calendarFormatter.solar2lunar(year, month, day);
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .ant-fullcalendar-date .ant-fullcalendar-value{
        display:none;
    }
    .ant-calendar-date {
        width: 40px !important;
        height: 40px;
        line-height: 16px;
    }
    .ant-fullcalendar-last-month-cell,
    .ant-fullcalendar-next-month-btn-day{
        .ant-fullcalendar-content,
        .ant-calendar-date{
            color:#bbb;
        }
    }
    .ant-fullcalendar-cell:nth-child(6),
    .ant-fullcalendar-cell:nth-child(7){
        &.ant-fullcalendar-last-month-cell,
        &.ant-fullcalendar-next-month-btn-day{
            .ant-fullcalendar-content,
            .ant-calendar-date{
                color:#bbb;
            }
        }
        .ant-calendar-date{
            color:#f00;
        }
    }
}
.date_active{
    color:#fff;
    background:#1890ff;
}

.tool_wrapper {
    .tool_side {
        flex-shrink: 0;
        width: 300px;
    }

    .tool_note {
        margin-left: -1px;
        flex: 1;
        height: 460px;
        margin-right: 15px;
        &::v-deep .scrollbar__wrap .scrollbar__view {
            background-color: #fff;
            padding: 0 1px 0 0;
            margin-left: 1px;
        }

        // margin-right: 15px;

        .add_btn {
            margin-top: 10px;
            margin-bottom: 20px;
            font-size: 32px;
            justify-content: center;
        }

        .note_item {
            margin-bottom: 20px;
            border: 1px solid #D9D9D9;
            box-sizing: border-box;
            border-left: none;

            &>div {
                padding: 0 10px;
                height: 32px;
                line-height: 32px;
                overflow: hidden;
                font-size: 12px;
                color: #333333;
                text-overflow: ellipsis;
                white-space: nowrap;
                box-sizing: border-box;
            }

            .header {
                align-items: center;

                .time {
                    margin-right: 5px;
                    flex: 1;
                    flex-shrink: 0;
                    width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                .icon {
                    margin-left: 5px;
                    font-size: 16px;
                    color: #B7B7B7;
                }

                .off {
                    color: #B7B7B7;
                }
            }

            .location {
                border-top: 1px solid #D9D9D9;
                border-bottom: 1px solid #D9D9D9;
            }

            .header,
            .task {
                background: #F6F6F6;
            }
        }
    }
}</style>